<template>
  <div v-if="isDisp" class="footer">
    <div
      class="tab-item"
      v-for="(item, index) of tabitems"
      :key="index"
      :class="[item.title, { on: index === idx }]"
      @click="tabTap(item, index)"
    >
      <img :src="index === idx ? item.iconSelect : item.icon" />
      <!--<p :class="['colorChange',{on:index === idx}]">{{item.title}}</p>-->
      <p :style="{ color: index === idx ? color : null }">{{ item.title }}</p>
    </div>
  </div>
</template>

<script type="text/javascript">
export default {
  props: {
    tabitems: Array,
    color: String
  },
  data() {
    return {
      idx: 0,
      isDisp: true
    };
  },
  watch: {
    $route(to) {
      let isNull = null;
      isNull = this.tabitems.findIndex(item => item.path === this.$route.path);
      if (isNull >= 0) {
        this.isDisp = true;
      } else {
        this.isDisp = false;
      }
    }
  },
  created() {
    let isNull = null;
    isNull = this.tabitems.findIndex(item => item.path === this.$route.path);
    if (isNull >= 0) {
      this.isDisp = true;
    } else {
      this.isDisp = false;
    }
    const index = this.tabitems.findIndex(
      item => item.path === this.$route.path
    );
    this.idx = index;
    console.log(this.idx)
  },
  activated() {
    const index = this.tabitems.findIndex(
      item => item.path === this.$route.path
    );
    this.idx = index;
  },
  methods: {
    tabTap: function(item, index) {
      this.idx = index;
      this.$router.push({
        path: item.path
      });
    }
  },
  computed: {}
};
</script>

<style lang="stylus" type="text/stylus" scoped>
.footer
    display flex
    position fixed
    left 0
    bottom 0
    height 1.03rem
    width 100%
    border-top 1px #999999 solid
    padding 0.2rem 0
    line-height 0.2rem
    background-color #ffffff
    z-index 10
    .tab-item
        display flex
        justify-content space-between
        flex-direction column
        align-items center
        font-size 0.32rem
        width 25%
        text-align center
        img
            width 0.6rem
            height 0.58rem
        p
            color black
</style>
